<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <style type="text/css">
        .singContents {
            margin: 70px 0px;
        }

        .event {
            /*background-color: lightblue;*/
            height: 220px;
        }

        .player {
            margin-top:30px;
        }

        .playList {
         /*   background-color: lightpink;*/
            margin-top: 50px;
        }

        .playct {
            border-radius: 15px 15px;
            background: dimgrey;
            height: 400px;
        }

        .playbutton {
            background: lightcoral;
            text-align: center;
            border-radius: 15px 15px;

        }

        button {
            border-radius: 5px 5px;
            margin: 2px 2px;
            font-family: "나눔바른고딕";
            font-weight: bold;
        }

        .bt1 {
            width: 100px;
            height: 50px;
            font-size: 2em;
        }

        #songPut {
            width: 315px;
            height: 35px;
            margin-top: 10px;
        }
        table{
            margin-top:20px;
            width:100%;
            border-top: 3px solid dimgrey;
            border-bottom: 3px solid dimgrey;
            text-align:center;
        }
        th,td{
            border-collapse: collapse;
        }

        tr{
            height:50px;
            border:1px solid dimgrey;
            border-left:none;
            border-right:none;
        }

        .li, .memo {
            width:30px;
            height:30px;
        }

    </style>
<!-- contents -->
<div id="contents" class="row">
    <div class="contentsHeader">
        <span class="log">노래방</span>
        <span class="wel">&nbsp;&nbsp;&nbsp;웹으로 노래를 부를 수 있습니다.</span>
    </div>
    <div class="singContents">
        <div class="event">
            <%@include file="eventSlide.jsp" %>
        </div>
        <div class="player">
            <div class="playtitle"><h3>PLAYER</h3></div>
            <div class="play">
                <div class="playct"></div>
                <div class="playbutton">
                    <div><input type="text" id="songPut"></div>
                    <div>
                        <button type="button" class="btn-info bt1">1</button>
                        <button type="button" class="btn-info bt1">2</button>
                        <button type="button" class="btn-info bt1">3</button>
                    </div>
                    <div>
                        <button type="button" class="btn-info bt1">4</button>
                        <button type="button" class="btn-info bt1">5</button>
                        <button type="button" class="btn-info bt1">6</button>
                    </div>
                    <div>
                        <button type="button" class="btn-info bt1">7</button>
                        <button type="button" class="btn-info bt1">8</button>
                        <button type="button" class="btn-info bt1">9</button>
                    </div>
                    <div style="padding-bottom:10px;">
                        <button type="button" class="btn-info bt1">시작</button>
                        <button type="button" class="btn-info bt1">0</button>
                        <button type="button" class="btn-info bt1">취소</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="playList">
            <div class="l1"><h3>LIST</h3></div>
            <div class="newList">
                <form method="post" id="newfrm" name="newfrm">
                    <table >
                        <colgroup>
                            <col style="width: 10%" />
                            <col style="width: 10%" />
                            <col style="width: 40%" />
                            <col style="width: 20%" />
                            <col style="width: 10%" />
                            <col style="width: 10%" />
                        </colgroup>
                        <thead  style="border:3px solid dimgrey; border-left:none; border-right:none;">
                        <tr>
                            <!-- 제목 행 출력 -->
                            <th>번호</th>
                            <th>곡번호</th>
                            <th>곡제목</th>
                            <th>아티스트</th>
                            <th>좋아요</th>
                            <th>가사</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2304</td>
                            <td>광화문에서</td>
                            <td>규현</td>
                            <td><img src="/images/like.png" class="li"/>5024</td>
                            <td><img src="/images/memo.png" class="memo"/></td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>

</div>